<template>
  <div class="login">
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <h1>万和后台管理系统</h1>
      <el-form-item label="用户名" prop="userName">
        <el-input
          type="userName"
          v-model="loginForm.userName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密  码" prop="passWord">
        <el-input
          type="password"
          v-model="loginForm.passWord"
          autocomplete="off"
          @keyup.enter.native="submitForm('loginForm')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="submitForm('loginForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 视频 -->
    <video
      class="video"
      playsinline=""
      autoplay=""
      muted=""
      loop=""
      style="background-image: url(>)"
    >
      <source src="../../assets/MP4/bgj.mp4" type="video/mp4" />
    </video>
  </div>
</template>

<script>
//解构引入封装的api
import { login,setCaptcha } from "@/api";
//映射vuex
import { mapMutations } from "vuex";
export default {
  data() {
    /**
     * @param {object} rule 就是选定的表单组件
     * @param {string} value 当前表单的value值
     * @param {Function} callback 校验通过传参,不通过不传参
     */
    var validateUserName = (rule, value, callback) => {
      // console.log(rule);
      // console.log(value);
      if (!value) {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: "",
        passWord: ""
      },
      rules: {
        userName: [{ validator: validateUserName, trigger: "blur" }],
        passWord: [{ validator: validatePassWord, trigger: "blur" }]
      },
      //验证码captcha
      setCaptcha:"",
      captcha:""
    };
  },
  methods: {
    ...mapMutations(["SET_USERINFO", "SET_MENULIST"]),
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //代表本地校验成功
          // console.log(this.loginForm.userName,this.loginForm.passWord);
          //登录效果动画美化
          const loading = this.$loading({
            lock: true,
            text: "正在玩命加载",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.6)"
          });
          login(this.loginForm.userName, this.loginForm.passWord)
            .then(res => {
              // console.log(res);
              if (res.data.state) {
                //美化登陆成功提示
                this.$message.success("登录成功");
                //验证用户名和密码是否正确
                //将用户信息存入vuex 
                this.$store.commit("SET_USERINFO",res.data.userInfo)
                //将权限按钮存入vuex
                this.$store.commit("SET_PROMISSIONBUTTON",res.data.permission)
                localStorage.setItem("bms-permission-button", JSON.stringify(res.data.permission.buttons));
                //将获得的token存入localStorage中
                localStorage.setItem("bms-token", res.data.token);
                //将用户信息存入localStorage中,留心:localStorage中只能存字符串
                localStorage.setItem(
                  "bms-userInfo",
                  JSON.stringify(res.data.userInfo)
                );
                //设置vuex的state['userInfo]的值
                this.SET_USERINFO(res.data.userInfo);
                //登录动画停止
                loading.close();
                //跳转到主页
                this.$router.push("/StudentManager/studentProduct");
              } else {
                //登录动画停止
                loading.close();
                //美化登陆失败提示
                this.$message.error("用户名或密码错误");
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted(){
    setCaptcha()
    .then(res=>{
      console.log(res.data.img);
      this.setCaptcha = res.data.img
    })
  }
};
</script>
